<template>
  <!-- 登录页面 -->
  <div class="box">
    <!-- 内容区域 -->
    <el-container>
      <div class="content">
        <div class="content-left">
          <div class="content-left-son">
            <div class="picture">
              <img src="../static/logo.png" />
            </div>
            <p>
              <strong>欢迎！</strong>
            </p>
            <p>
              <strong>智学无忧-后台管理系统</strong>
            </p>
          </div>
        </div>
        <div class="content-right">
          <div class="content-right-son">
            <p>登录</p>
            <!-- 表单 -->
            <el-form
              ref="ruleFormRef"
              :model="ruleForm"
              status-icon
              class="demo-ruleForm"
              label-position="top"
            >
              <div class="input">
                <el-form-item prop="username">
                  <el-input
                    v-model="ruleForm.username"
                    type="text"
                    autocomplete="off"
                    placeholder="用户名"
                    :prefix-icon="User"
                  />
                </el-form-item>

                <el-form-item prop="password">
                  <el-input
                    v-model="ruleForm.password"
                    type="password"
                    autocomplete="off"
                    placeholder="密码"
                    :prefix-icon="Lock"
                  />
                </el-form-item>
              </div>
              <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">登 录</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </el-container>
  </div>
</template>

<script >
import { User, Lock } from "@element-plus/icons-vue";
import { ElMessage as $msg } from "element-plus";
import Cookies from "js-cookie";
import { post } from "@/utlis/http";
import store from "@/store";

export default {
  setup() {
    return {
      User,
      Lock,
    };
  },
  components: { User, Lock },
  data() {
    return {
      ruleForm: {
        username: "", //用户名
        password: "", //密码
      },
    };
  },
  created() {
    Cookies.remove("token"); //删除token
  },
  methods: {
    submitForm() {
      if (this.ruleForm.username.trim() == "") {
        $msg.warning("用户名不能为空");
        return;
      } else if (this.ruleForm.password.trim() == "") {
        $msg.warning("密码不能为空");
        return;
      }
      //如果用户名密码都不为空就调用接口
      if (
        this.ruleForm.username.trim() &&
        this.ruleForm.password.trim() != ""
      ) {
        let data = {
          _gp: "admin",
          _mt: "login",
          ...this.ruleForm,
        };
        post(data).then((res) => {
            let { data, errmsg, errno } = res.data;
            if (200 == errno) {
              $msg.success("登录成功");
              Cookies.set("token", data, { expires: 1 / 24 / 2 }); //保存token,半个小时失效，一天除以24小时再除以2
              store.dispatch("getUser", this.ruleForm);
              if (this.$route.query.lo) {
                this.$router.replace({ path: this.$route.query.lo });
              } else {
                this.$router.push("/"); //登录成功后跳转主页
              }
            } else {
              $msg.warning(errmsg);
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
  },
};
</script>

<style scoped lang="less">
/* 最大盒子 */
.box {
  height: 100%;
  width: 100%;
  background: url("../static/login-back.png");
  background-size: cover;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 内容区域 */
  .content {
    width: 800px;
    height: 450px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    overflow: hidden;
    border-radius: 5px;
    /* 内容区域左边盒子 */
    .content-left {
      width: 43%;
      background-color: #005de9;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      .content-left-son {
        text-align: center;
      }
      /* 左边盒子图 */
      .content-left-son img {
        width: 145px;
        height: 150px;
      }
      .picture {
        background-color: #155cd4;
        width: 165px;
        height: 150px;
        margin: auto;
        border-radius: 100%;
        box-shadow: 20px 0px 50px 0px #fff;
      }
    }

    /* 内容区域右边盒子 */
    .content-right {
      width: 57%;
      background-color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      .content-right-son {
        text-align: center;
        width: 400px;
        margin: auto;
        p {
          font-size: 24px;
        }
        .el-form {
          margin: auto;
          .el-input {
            margin-bottom: 5px;
            width: 100%;
            height: 40px;
          }
          .input /deep/ .el-input__inner {
            height: 40px !important;
            &.el-input__inner:focus {
              background-color: #e8f0fd;
              border-color: #dfe2e9;
            }
          }
          .el-button {
            margin: auto;
            width: 120px;
          }
        }
      }
    }
  }
}
</style>